<template>
  <header class="header wrap">
    <div class="header-l">
      <h1 @click="$router.push('/home')"><img src="@/assets/images/indexLogo.6f8ac4f0.png" alt="" /></h1>
    </div>
    <div class="header-c">
      <ul>
        <li v-for="(item, index) in navList" :key="index" :class="$route.path == item.path ? 'active' : ''" @click="$router.push(`${item.path}`)">{{ item.title }}</li>
      </ul>
    </div>
    <div class="header-r">
      <input type="text" placeholder="输入关键字" v-model="keyword" @keydown.enter="fn" />
      <span @click="fn"></span>
    </div>
  </header>
</template>

<script>
export default {
  name: 'myHeader',
  data() {
    return {
      navList: [
        { path: '/home', title: '首页' },
        { path: '/goods', title: '全部商品' },
        { path: '/user', title: '个人中心' },
        { path: '/order', title: '我的订单' },
        { path: '/free', title: '专属福利' }
      ],
      keyword: ''
    }
  },
  methods: {
    fn() {
      this.$router.push(`/goods?keyword=${this.keyword}`)
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  height: 118px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // background-color: skyblue;
  font-size: 16px;
  font-weight: 500;

  .header-l {
    width: 258px;
    height: 72px;
    h1 {
      cursor: pointer;
      img {
        height: 56px;
      }
    }
  }
  .header-c {
    ul {
      width: 500px;
      height: 16px;
      display: flex;
      justify-content: space-between;
      li {
        cursor: pointer;
        &.active {
          color: #0a328e;
          font-weight: 700;
        }
      }
    }
  }
  .header-r {
    display: flex;
    input {
      width: 214px;
      height: 40px;
      line-height: 40px;
      border-radius: 20px 0px 0px 20px;
      border: 1px solid #dedede;
      padding-left: 19px;
      font-size: 14px;
    }
    span {
      width: 50px;
      height: 40px;
      border-radius: 0px 20px 20px 0px;
      background: url('@/assets/images/search.png') no-repeat center #0a328e;
      cursor: pointer;
    }
  }
}
</style>
